<script setup lang="ts">
import {ref} from 'vue';
import KgLoginDialog from './KgLoginDialog.vue';
import ComfirmDialog from './ComfirmDialog.vue';
import SettingsDialog from './SettingsDialog.vue';
import IdentityDialog from './IdentityDialog.vue';
import {useUserStore} from '@/stores/user';
import {message} from '@/utils/message';

const userStore=useUserStore();
const showLogin=ref(false),showLogout=ref(false),showSettings=ref(false),showIdentity=ref(false);

const logout=() =>{
  userStore.logout();
  message('success','登出成功');
}
const clickSettings=() =>{
  // searchSong('周杰伦 最伟大的作品').then(data =>{
  //   console.log(data)
  //   getSongInfo(data.lists[0].EMixSongID)
  // })
  //loginByToken()
  showSettings.value=true;
}
</script>

<template>
  <v-navigation-drawer
    class="p-2"
    v-bind="$attrs"
    temporary
  >
    <div v-if="userStore.token" class="flex-sc my-2 cursor-pointer">
      <img
        crossorigin="anonymous"
        class="w-12 h-12 rounded-full mr-2"
        src="https://imgessl.kugou.com/kugouicon/165/20100101/20100101192931478054.jpg" />
      <span class="break-all line-clamp-1">{{ userStore.user?.name }}</span>
    </div>
    <div v-else class="flex-sc my-2 cursor-pointer" @click="showLogin=true">
      <img class="w-12 h-12 rounded-full mr-2" src="https://imgessl.kugou.com/kugouicon/165/20100101/20100101192931478054.jpg" />
      <span>点击登录</span>
    </div>

    <v-divider class="my-2"></v-divider>

    <v-list density="compact" nav>
      <v-list-item prepend-icon="mdi-account-outline" title="身份码" value="code" @click="showIdentity=true"></v-list-item>
      <v-list-item prepend-icon="mdi-cog-outline" title="设置" value="setting" @click="clickSettings"></v-list-item>
      <v-list-item prepend-icon="mdi-logout" title="退出登录" value="logout" @click="showLogout=true;"></v-list-item>
    </v-list>
  </v-navigation-drawer>
  <KgLoginDialog v-model="showLogin" />
  <ComfirmDialog
    v-model="showLogout"
    content="确认是否登出酷狗账号？"
    @confirm="logout"
  />
  <SettingsDialog v-model="showSettings" />
  <IdentityDialog v-model="showIdentity" />
</template>